<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import { useLocationParams } from "@/store/useLocationStore";
import {
  getCourseRewardInfo,
  receiveReward,
  getRewardSN
} from "../LiveNew/LiveNewApi";
import { launchRedPacket3Times } from "@/store/useRedPacket";
const data = ref([]);
const rewardData = ref();
const loading = ref(false);
const selectedReward = ref(null);

const { getAllParams, setParam } = useLocationParams();
const { ...otherParams } = getAllParams();

onBeforeMount(() => {
  getSN();
});

async function getSN() {
  data.value = await getRewardSN({ ...otherParams });
  // 默认选中第一个红包
  selectedReward.value =
    data.value && data.value.length > 0 ? data.value[0] : null;
  if (selectedReward.value) {
    await fetchData({ ...selectedReward.value });
  }
}

async function fetchData(obj) {
  rewardData.value = await getCourseRewardInfo({ sn: obj.sn });
}

async function handleReward() {
  if (!rewardData.value) return;
  loading.value = true;
  try {
    const sendPullState = async (pullState: number) => {
      await receiveReward({
        ...otherParams,
        ...selectedReward.value,
        pullState
      });
      await getSN();
    };

    await launchRedPacket3Times({
      packageInfo: rewardData.value.packageInfo,
      sn: rewardData.value.sn,
      sendPullState,
      callback: () => {}
    });
    // 领取成功后刷新数据
  } finally {
    loading.value = false;
  }
}

function selectReward(reward) {
  selectedReward.value = reward;
}
</script>

<template>
  <div
    class="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col relative overflow-hidden"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <!-- 左上角装饰 -->
      <div
        class="absolute -left-16 -top-16 w-48 h-48 bg-blue-200 rounded-full opacity-10 blur-3xl"
      ></div>
      <!-- 右上角装饰 -->
      <div
        class="absolute -right-16 top-32 w-64 h-64 bg-blue-300 rounded-full opacity-10 blur-3xl"
      ></div>
      <!-- 底部装饰 -->
      <div
        class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-96 h-32 bg-blue-100 rounded-full opacity-30 blur-2xl"
      ></div>
      <!-- 波浪纹理 -->
      <div class="absolute inset-0 opacity-5">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
          <defs>
            <pattern
              id="wave"
              width="100"
              height="100"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M0 50 Q 25 25, 50 50 T 100 50"
                stroke="currentColor"
                fill="none"
                stroke-width="2"
              />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#wave)" />
        </svg>
      </div>
    </div>

    <!-- 用户信息 -->
    <div
      class="flex-1 flex flex-col items-center justify-center px-6 relative z-10"
    >
      <div class="w-20 h-20 mb-4 flex justify-center items-center">
        <van-icon
          name="gift-o"
          class="text-[#ff3838] !text-6xl rounded-lg shadow-lg"
        />
      </div>
      <div class="text-center mb-6">
        <div
          class="text-xl font-medium text-blue-500 mb-1"
          v-if="data.length > 0"
        >
          选择要补发的红包
        </div>
        <div class="text-xl font-medium text-blue-500 mb-1" v-else>
          暂无要补发的红包
        </div>
      </div>

      <!-- 红包列表 -->
      <div class="w-full space-y-4">
        <div
          v-for="(reward, index) in data"
          :key="index"
          @click="selectReward(reward)"
          class="reward-card"
          :class="{ selected: selectedReward === reward }"
        >
          <div>
            <div class="reward-title">
              {{ reward.rewardTypeDesc }}
            </div>
            <div class="reward-time">
              {{ rewardData?.title }}
            </div>
          </div>
          <van-icon
            name="success"
            class="check-icon"
            v-if="selectedReward === reward"
          />
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="px-6 pb-8 relative z-10">
      <button
        @click="handleReward"
        :disabled="!selectedReward || !rewardData"
        class="claim-btn"
      >
        领取红包
      </button>
    </div>

    <!-- Loading -->
    <van-overlay :show="loading" class="flex items-center justify-center">
      <van-loading type="spinner" color="#3b82f6" size="36px" />
    </van-overlay>
  </div>
</template>

<style scoped>
.min-h-screen {
  min-height: 100vh;
}

.reward-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px 0 rgba(58, 120, 255, 0.08);
  transition:
    box-shadow 0.2s,
    transform 0.2s,
    border 0.2s,
    background 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reward-card.selected {
  border-color: #3b82f6;
  background: linear-gradient(90deg, #e0f0ff 0%, #f6fbff 100%);
  box-shadow: 0 4px 16px 0 rgba(58, 120, 255, 0.15);
  transform: scale(1.03);
}
.reward-card:hover {
  box-shadow: 0 6px 20px 0 rgba(58, 120, 255, 0.18);
  transform: scale(1.02);
}
.reward-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.reward-time {
  font-size: 13px;
  color: #7b8ba3;
  margin-top: 2px;
}
.check-icon {
  color: #3b82f6;
  font-size: 22px;
}

.claim-btn {
  width: 100%;
  padding: 16px 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(90deg, #4f8cff 0%, #3b82f6 100%);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(58, 120, 255, 0.12);
  transition:
    background 0.2s,
    transform 0.1s;
}
.claim-btn:active {
  transform: scale(0.97);
}
.claim-btn:disabled {
  background: #cfd8dc;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}
</style>
